<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精美Tab标签页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .tab-container {
            width: 100%;
            max-width: 800px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* Tab标签栏样式 */
        .tab-header {
            display: flex;
            background: rgba(255, 255, 255, 0.15);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
        }

        .tab-item {
            flex: 1;
            padding: 20px 15px;
            text-align: center;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.7);
            font-weight: 500;
            font-size: 16px;
            transition: all 0.3s ease;
            position: relative;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
        }

        .tab-item:last-child {
            border-right: none;
        }

        .tab-item:hover {
            background: rgba(255, 255, 255, 0.2);
            color: white;
        }

        .tab-item.active {
            color: white;
            background: rgba(255, 255, 255, 0.25);
        }

        /* Tab内容区域样式 */
        .tab-content {
            min-height: 300px;
            padding: 30px;
            color: white;
        }

        .tab-pane {
            display: none;
            animation: fadeIn 0.5s ease;
        }

        .tab-pane.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 预览窗口样式 */
        .preview-popup {
            position: fixed;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            padding: 20px;
            width: 280px;
            z-index: 1000;
            opacity: 0;
            transform: translateY(10px) scale(0.95);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        .preview-popup.show {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }

        /* 箭头样式 */
        .preview-popup::before {
            content: '';
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid rgba(255, 255, 255, 0.95);
        }

        .preview-content {
            text-align: center;
        }

        .preview-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 15px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
        }

        .preview-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }

        .preview-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.4;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .tab-item {
                padding: 15px 10px;
                font-size: 14px;
            }
            
            .tab-content {
                padding: 20px;
                min-height: 250px;
            }
            
            .preview-popup {
                width: 240px;
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="tab-container">
        <!-- Tab标签栏 -->
        <div class="tab-header">
            <div class="tab-item active" data-tab="home">
                首页
            </div>
            <div class="tab-item" data-tab="products">
                产品
            </div>
            <div class="tab-item" data-tab="services">
                服务
            </div>
            <div class="tab-item" data-tab="about">
                关于
            </div>
            <div class="tab-item" data-tab="contact">
                联系
            </div>
        </div>

        <!-- Tab内容区域 -->
        <div class="tab-content">
            <div class="tab-pane active" id="home">
                <h2>欢迎来到首页</h2>
                <p>这里是我们的主页内容，展示了最新的信息和动态。</p>
                <p>我们致力于为用户提供最优质的服务和体验。</p>
            </div>
            <div class="tab-pane" id="products">
                <h2>我们的产品</h2>
                <p>这里展示了我们精心研发的产品系列。</p>
                <p>每款产品都经过严格的质量控制和用户测试。</p>
            </div>
            <div class="tab-pane" id="services">
                <h2>专业服务</h2>
                <p>我们提供全方位的专业服务支持。</p>
                <p>包括技术咨询、定制开发和售后服务等。</p>
            </div>
            <div class="tab-pane" id="about">
                <h2>关于我们</h2>
                <p>我们是一家专注于创新科技的公司。</p>
                <p>拥有多年的行业经验和专业技术团队。</p>
            </div>
            <div class="tab-pane" id="contact">
                <h2>联系我们</h2>
                <p>如果您有任何问题或建议，请随时联系我们。</p>
                <p>我们将竭诚为您服务。</p>
            </div>
        </div>
    </div>

    <!-- 预览窗口 -->
    <div class="preview-popup" id="previewPopup">
        <div class="preview-content">
            <div class="preview-icon" id="previewIcon">🏠</div>
            <div class="preview-title" id="previewTitle">标题</div>
            <div class="preview-desc" id="previewDesc">这是预览描述内容</div>
        </div>
    </div>

    <script>
        // Tab标签页数据配置
        const tabData = {
            home: {
                title: '首页',
                desc: '访问我们的主页，了解最新动态和重要信息',
                icon: '🏠'
            },
            products: {
                title: '产品中心',
                desc: '浏览我们的产品系列，发现创新解决方案',
                icon: '📦'
            },
            services: {
                title: '服务中心',
                desc: '获取专业技术支持和定制化服务方案',
                icon: '⚙️'
            },
            about: {
                title: '关于我们',
                desc: '了解公司发展历程和核心团队介绍',
                icon: '🏢'
            },
            contact: {
                title: '联系方式',
                desc: '获取联系信息，与我们建立沟通桥梁',
                icon: '📞'
            }
        };

        // 获取DOM元素
        const tabItems = document.querySelectorAll('.tab-item');
        const tabPanes = document.querySelectorAll('.tab-pane');
        const previewPopup = document.getElementById('previewPopup');
        const previewIcon = document.getElementById('previewIcon');
        const previewTitle = document.getElementById('previewTitle');
        const previewDesc = document.getElementById('previewDesc');

        let popupTimeout = null;

        // Tab切换功能
        tabItems.forEach(item => {
            // 鼠标悬停事件 - 显示预览窗口
            item.addEventListener('mouseenter', function(e) {
                // 清除之前的定时器
                clearTimeout(popupTimeout);
                
                // 获取当前tab的数据
                const tabId = this.getAttribute('data-tab');
                const data = tabData[tabId];
                
                // 更新预览窗口内容
                previewIcon.textContent = data.icon;
                previewTitle.textContent = data.title;
                previewDesc.textContent = data.desc;
                
                // 计算预览窗口位置
                const rect = this.getBoundingClientRect();
                const popupRect = previewPopup.getBoundingClientRect();
                
                // 计算预览窗口应该显示的位置（在tab下方居中）
                const x = rect.left + rect.width / 2 - popupRect.width / 2;
                const y = rect.bottom + 10; // 距离tab底部10px
                
                // 设置预览窗口位置
                previewPopup.style.left = x + 'px';
                previewPopup.style.top = y + 'px';
                
                // 显示预览窗口
                previewPopup.classList.add('show');
            });

            // 鼠标离开事件 - 隐藏预览窗口（延迟）
            item.addEventListener('mouseleave', function(e) {
                // 延迟隐藏，避免鼠标在tab和预览窗口之间移动时闪烁
                popupTimeout = setTimeout(() => {
                    previewPopup.classList.remove('show');
                }, 200);
            });

            // 点击事件 - 切换tab
            item.addEventListener('click', function() {
                const tabId = this.getAttribute('data-tab');
                
                // 移除所有tab的active状态
                tabItems.forEach(tab => tab.classList.remove('active'));
                tabPanes.forEach(pane => pane.classList.remove('active'));
                
                // 为当前tab添加active状态
                this.classList.add('active');
                document.getElementById(tabId).classList.add('active');
                
                // 隐藏预览窗口
                previewPopup.classList.remove('show');
            });
        });

        // 预览窗口鼠标事件处理（防止快速离开tab时窗口消失）
        previewPopup.addEventListener('mouseenter', function() {
            // 鼠标进入预览窗口时清除隐藏定时器
            clearTimeout(popupTimeout);
            this.classList.add('show');
        });

        previewPopup.addEventListener('mouseleave', function() {
            // 鼠标离开预览窗口时隐藏
            this.classList.remove('show');
        });

        // 窗口大小改变时重新计算预览窗口位置
        window.addEventListener('resize', function() {
            if (previewPopup.classList.contains('show')) {
                // 如果预览窗口正在显示，重新计算位置
                const activeTab = document.querySelector('.tab-item:hover') || 
                                document.querySelector('.tab-item.active');
                if (activeTab) {
                    const tabId = activeTab.getAttribute('data-tab');
                    const rect = activeTab.getBoundingClientRect();
                    const popupRect = previewPopup.getBoundingClientRect();
                    
                    const x = rect.left + rect.width / 2 - popupRect.width / 2;
                    const y = rect.bottom + 10;
                    
                    previewPopup.style.left = x + 'px';
                    previewPopup.style.top = y + 'px';
                }
            }
        });
    </script>
</body>
</html>
